<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<html style="height:100%;overflow:hidden;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>首页内容版块</title>
<jsp:include page="/common/link.jsp"></jsp:include>
<link rel="stylesheet" type="text/css" media="all" href="/portal/njs/basd/soChange1.6.1/style.css" />
<script src="/portal/njs/basd/soChange1.6.1/jquery.soChange-min.js" type="text/javascript"></script>
</head>

<body>
	<input type="hidden" name="portalForm.PANEL_ID" value="${portalForm.PANEL_ID[0]}"></input>
	<div class="fullscreenDiv" style="width:100%;height:100%">
    </div>
</div>
</div>

<div id="changeDiv">
</div>
</body>
</html>
<script>
$(function(){
	$(window).resize(function(){
		$(".fullscreenDiv .newbox-area").css("height",$(window).height());
	});
})


$(function(){
	$.ajax({
		url:"findPorletById.do",
		data: {PANEL_ID:$(":input[name='portalForm.PANEL_ID']").val()},
		type:"post",
		success:function(msg){
			var value = msg.PORLET_CONFIG;
					var $colParent = $(".fullscreenDiv");
					var areaHeight = $(document).height()+"px" ;//26是span class="ttcorner"的高度
					try{
						var urlArray = eval("("+value.CONTENT_URL+")");
							
						if(urlArray.length>1){
							var $eachBox = $('<div class="newbox-area" style="height:'+areaHeight+'"></div>'); 
	    					var $change = $('<div id="change1" class="changeBox_a1" second="'+value.SECOND+'"></div>');
	    						
							for (var one in urlArray)
	    					{
	    						var $newbox_iframe = $('<iframe name="bd" src="" class="a_bigImg" width="100%" height="100%">');
	    						$newbox_iframe.attr("src",urlArray[one].url);
	    						$change.append($newbox_iframe);
	    					}
	    					
	    					var $newbox_ul = $('<ul class="ul_change_a2"></ul>');
	    					
	    					var i=0;
	    					for (var one in urlArray)
	    					{
	    						i++;
	    						var $eachBox_li = $('<li><span>'+i+'</span></li>');
	    						$newbox_ul.append($eachBox_li);
	    					}
	    					
	    					$change.append($newbox_ul);
	    					$eachBox.append($change);
	    					$colParent.append($eachBox);
	    					
	    					//数字导航切换及自定义当前数字的class
							$('#change1 .a_bigImg').soChange({
								thumbObj:'#change1 .ul_change_a2 span',
								thumbNowClass:'on',//自定义导航对象当前class为on
								changeTime:value.SECOND*1000//自定义切换时间ms
						
							});
	    				}else{
	    					var $newbox_area = $('<div class="newbox-area" style="height:100%"><iframe src="" width="100%" height="100%" frameborder="0"></div>');
							$newbox_area.find("iframe").attr("src",urlArray[0].url);
							$colParent.append($newbox_area);
	    				}
	    				
					}catch(e){
						var $newbox_area = $('<div class="newbox-area" style="height:'+areaHeight+'"><iframe src="" width="100%" height="100%" frameborder="0"></div>');
						$newbox_area.find("iframe").attr("src",value.CONTENT_URL);
						$colParent.append($newbox_area);
					}
					
			initDrag();
		}
	});
	var initDrag = function(){
			$('.newbox').each(function(i,n){
				var _this = $(n);
				var _parent = _this.parent();
				var dragfn = _this.uedDrag({handler:_this.find('.newbox-tt>h3').children(":not('.option')")});
				document.onselectstart = function(){
					return false;
				}
				dragfn.bind("StartDrag",function(current){
					changeZIndex(current.target[0]);
					_this.css({"-moz-user-select":"none","-khtml-user-select":"none"});
				})
				dragfn.bind("StopDrag",function(current){
					clearTimeout(timeout);
					var timeout = setTimeout(function(){
						var reg = /\d+/;
						//var left = reg.exec(_this.css("left"));
						//var top = reg.exec(_this.css("top"));
						var width = reg.exec(_this.width());
						var height = reg.exec(_this.height());
						var _parent = _this.parent();
						var diffX = current.diffX;
						var diffY = current.diffY;
						var index = Math.round((diffY+current.top)/height);
						if(_parent.hasClass("col-1")){
							if(diffX>width/2 && diffX<width*2){
								var col2 = _parent.next(".col-2");
								if(col2.children().length>index){
									_this.css({left:"",top:""}).insertBefore(col2.children().eq(index));
								}else{
									_this.css({left:"",top:""}).appendTo(col2);	
								}
							}else if(Math.abs(diffY)>height/2 && _this.index()!=index){
								_this.css({left:"",top:""}).insertBefore(_parent.children().eq(index));
							}
						}else if(_parent.hasClass("col-2")){
							if(-diffX>=width/2 && -diffX<width*2){
								var col1 = _parent.prev(".col-1");
								if(col1.children().length>index){
									_this.css({left:"",top:""}).insertBefore(col1.children().eq(index));
								}else{
									_this.css({left:"",top:""}).appendTo(col1);	
								}
							}else if(Math.abs(diffY)>height/2 && _this.index()!=index){
								_this.css({left:"",top:""}).insertBefore(_parent.children().eq(index));
							}
						}
						savePozition();
	    				
						return false;
					},500)
				})
			})
		}
		function changeZIndex(obj){
			$(obj).css("z-index", 2).siblings("div").css("z-index", 1);
		}
		
		function savePozition(){
			var panels = $('.newbox');
			for (var i=1;i<panels.length;i++)
			{
				var panel = panels[i];
				var top = $(panels[i]).offset().top;
				if($(panels[i]).offset().top<$(panels[i-1]).offset().top)
				{
					for (var j=0;j<panels.length;j++)
					{
						if(top<$(panels[j]).offset().top)
						{
							for(k=i;k>j;k--)
							{
								panels[k] = panels[k-1];
							}
							panels[j] = panel;
							break;
						}
					}
				}
			}
			
			var panelIds = "";
			for (var i=0;i<panels.length;i++)
			{
				panelIds = panelIds + panels[i].id + ",";
			}

			$.ajax({
				url:"savePanelOrder.do?panelIds="+panelIds,
				type:"post",
				success:function(msg){
				}
			});
		}
		
		
});
</script>